<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .content {
            position: relative;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            margin: 0 auto;
            background-color: skyblue;
        }
        
        .content .line {
            width: 6px;
            height: 500px;
            background-color: #aaa;
            position: absolute;
            left: 50%;
            /* transform: translateX(-50%); */
            margin-left: -2px;
        }
        
        .cover {
            position: absolute;
            width: 485px;
            height: 485px;
            background-color: palevioletred;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .cent {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: purple;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /* 时针 */
        
        .hour {
            position: absolute;
            width: 5px;
            height: 100px;
            background-color: red;
            left: 50%;
            top: 50%;
            /* transform: translateX(-50%); */
            transform-origin: top center;
            z-index: 2;
            /* animation: move 21600s steps(60) infinite; */
        }
        /* 分针 */
        
        .minute {
            position: absolute;
            width: 5px;
            height: 115px;
            background-color: royalblue;
            left: 50%;
            top: 50%;
            /* transform: translateX(-50%); */
            transform-origin: top center;
            transition: all 0.5s;
            /* transform: rotate(45deg); */
            /* animation: move 3600s steps(3600) infinite; */
        }
        /* 秒针 */
        
        .secound {
            position: absolute;
            width: 5px;
            height: 115px;
            background-color: paleturquoise;
            border-top-left-radius: 50%;
            left: 50%;
            top: 50%;
            margin-left: -2px;
            z-index: 3;
            transform-origin: top center;
            /* transform: rotate(45deg); */
            /* animation: move 60s steps(60) infinite; */
            /* transform: rotate(3deg); */
        }
        
        .line1 {
            transform: rotate(30deg);
        }
        
        .line2 {
            transform: rotate(60deg);
        }
        
        .line3 {
            transform: rotate(90deg);
        }
        
        .line4 {
            transform: rotate(120deg);
        }
        
        .line5 {
            transform: rotate(150deg);
        }
        
        .line6 {
            transform: rotate(180deg);
        }
        
        @keyframes move {
            form {}
            to {
                /* 旋转360度 */
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="line"></div>
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
        <div class="cover"></div>
        <div class="cent"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="secound"></div>
        <div class="now"></div>
    </div>
    <script>
        function times() {
            let hours = document.querySelector('.hour');
            let mins = document.querySelector('.minute');
            let secounds = document.querySelector('.secound');
            let now = document.querySelector('.now');

            let times = new Date();
            let hour = times.getHours();
            let min = times.getMinutes();
            let secound = times.getSeconds();
            let secound2 = secound * 6 + 180;
            let min2 = min * 6 + 180;
            // min2/12渐渐跨5度
            let hour2 = hour * 30 + 180 + min / 12;
            secounds.style.transform = `rotate(${secound2}deg)`;
            mins.style.transform = `rotate(${min2}deg)`;
            hours.style.transform = `rotate(${hour2}deg)`;
            now.innerHTML = hour + '时' + min + '分' + secound + '秒';
        }
        times();
        setInterval(times, 1000)
    </script>
</body>

</html>